iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
2
Modern Web

Quasar CLI Framework 邪教:整合分散的前端技術和工具、常見的開發需求系列 第 10

第十天:專案維護 - Webpack 編譯與打包優化(feat. Tree Shaking、Minify & Uglify、Code Splitting & Cache Brusting)

  • 分享至 

  • xImage
  •  

※ 今天內容

一、Tree Shaking
二、Minify & Uglify
三、Code Splitting & Cache Brusting
四、總結
五、延伸閱讀

一、Tree Shaking

以字面上的意思,就是搖樹 (別傻了根本搖不動)
實際上的意思,就是去除沒必要的程式碼 (dead code elimination)

例如下面程式碼例子:

// src/lib.js

export function methodA() {
    return 'methodA';
}

export function methodB() {
    return 'methodB';
}

export function methodC() {
    return 'methodC';
}

// src/index.js
import { methodA } from "./mathUtils";

methodA();

經過Tree Shaking,編譯出來的程式碼結果:

/* 0 */
/***/ function() {
    "use strict";
    // CONCATENATED MODULE: ./src/lib.js
        function methodA() {
        return 'methodA';
    }
    // CONCATENATED MODULE: ./src/index.js
    console.log(methodA());
    /***/}
/******/ ]);

二、Minify & Uglify

替除HTML、Javascript 和 Css 的程式碼多餘的空白與空白行

HTML 的部分 Quasar 是使用 html-minifier

<!DOCTYPE html><html><head><title>Quasar App</title><meta charset=utf-8><meta name=description content="A Quasar Framework app"><meta name=format-detection content="telephone=no"><meta name=msapplication-tap-highlight content=no><meta name=viewport content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"><link rel=icon type=image/png sizes=128x128 href=icons/favicon-128x128.png><link rel=icon type=image/png sizes=96x96 href=icons/favicon-96x96.png><link rel=icon type=image/png sizes=32x32 href=icons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=icons/favicon-16x16.png><link rel=icon type=image/ico href=favicon.ico><link href=css/vendor.12e75b1c.css rel=stylesheet><link href=css/app.0e433876.css rel=stylesheet></head><body><div id=q-app></div><script src=js/vendor.fc885105.js></script><script src=js/app.74e5baec.js></script></body></html>

CSS 的部分Quasar是使用PostCSS + cssnano 處理:
壓縮過後的CSS:

@charset "UTF-8";.section{padding:25px 30px}.section_title{font-size:2.4em;font-weight:700;text-align:center;color:#212121}.section_content{margin-top:25px}

Javascript 的部分 Quasar 是使用 UglifyJS
壓縮過後的JS:

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["about"],{f820:function(t,e,n){"use strict";n.r(e);var a=function(){var t=this,e=t.$createElement;t._self._c;return t._m(0)},s=[function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"about"},[n("h1",[t._v("This is an about page")])])}],u=n("2877"),c={},i=Object(u["a"])(c,a,s,!1,null,null,null);e["default"]=i.exports}}]);
//# sourceMappingURL=about.7ada64aa.js.map

另外,Dev Server 上的網頁和程式碼並不是最佳化的結果 (像是 Uglify & Minify),正式的網站還是要用npm run build產出的檔案佈署,不建議以 Dev Server 來架設實際的網站。

https://ithelp.ithome.com.tw/upload/images/20201021/20120331jLuKNZkhE5.png

三、Code Splitting & Cache Brusting

將專案當中,核心功能之外的JS與CSS,拆散到不同的檔案當中,透過程式動態引入到網頁當中
並且在檔名透過後面的hash字串(35.861fbfb.css)
讓瀏覽器對沒有更新的程式碼從Cache中存取,對有更新的檔案重新載入

拆檔後的JS
https://ithelp.ithome.com.tw/upload/images/20200925/20120331fXxPlzRWKw.png

拆檔後的CSS
https://ithelp.ithome.com.tw/upload/images/20200925/20120331f4lmNikTde.png

四、總結

以上是Quasar CLI 專案在Webpack上已經處理好的優化設定
這些細節設定,參考Webpack官方的文件後,會發現當中的設定相當細瑣
如果需要改變Quasar 預設好的設定,一樣可以從專案的quasar.config.js檔案的build屬性設定

五、延伸閱讀

Tree Shaking原理 -【webpack进阶系列】
淺談大型 React 專案的 Code Splitting
Webpack: 拆檔和 cache 處理
Adding Hashes to Filenames


上一篇
第九天:專案維護 - Webpack 編譯與打包的過程 (feat. Entry、Output、Loader、Plugin)
下一篇
第十一天:專案維護 - 整合情境練習 (第二部分總結)
系列文
Quasar CLI Framework 邪教:整合分散的前端技術和工具、常見的開發需求31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言